<template>
    <div class="view-main">
        <div class="view-header">
            <div></div>
            <el-button class="button" type="primary" @click="handleAdd" icon="el-icon-plus">添加</el-button>
        </div>

        <div class="view-body">
            <div class="light-table">
                <el-table :data="tableData" height="300" highlight-current-row style="width: 100%">
                    <el-table-column property="departName" label="部门名称" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column property="orgCode" label="部门编号" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column label="操作" align="center" width="330">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" @click="handleDetail(scope.row)">详情</el-button>
                            <el-button type="text" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                            <el-button type="text" class="danger-color" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]"
                               :total="total" :current-page="pageNum" :page-size.sync="pageSize" :page-count="pages"
                               @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
            </div>
        </div>

        <el-dialog :title="typeText" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false">
            <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="80px" size="mini" style="padding-right: 20px" :disabled="type === 2">
                <el-form-item label="上级部门" prop="parentId">
                    <el-input v-model="addForm.parentId" clearable></el-input>
                </el-form-item>
                <el-form-item label="部门名称" prop="departName">
                    <el-input v-model="addForm.departName" clearable></el-input>
                </el-form-item>
                <el-form-item label="部门编号" prop="orgCode">
                    <el-input v-model="addForm.orgCode" clearable></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="addForm.remark" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="type < 2">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateConfirm('addForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { isEmpty, formatDate, stringFormat,getStartTimeOfDate, getEndTimeOfDate, getStartTimeOfWeek, getEndTimeOfWeek, getStartTimeOfMonth, getEndTimeOfMonth } from '../../utils/util'
    import { getAction } from '@/utils/manage'

    export default {
        name: 'department',
        data() {
            return {
                pageNum: 1,
                pageSize: 10,
                pages: 0,
                total: 0,
                type: 0,
                dialogVisible: false,
                addForm: {
                    parentId: '',
                    departName: '',
                    orgCode: '',
                    remark: ''
                },
                addRules: {
                    parentId: [{ trigger: 'blur' }],
                    departName: [{ required: true, message: '请输入部门名称',trigger: 'blur' }],
                    orgCode: [{ required: true,message: '请输入部门编号',trigger: 'blur' }],
                    remark: [{trigger: 'blur' }]
                },
                tableData: [],
                url: {
                    page: "/sys/department",
                    update: '/sys/department/update/{0}',
                    insert: '/sys/department/insert',
                    delete: '/sys/department/delete/{0}',

                }
            }
        },
        computed: {
            typeText() {
                return this.type === 0 ? '添加部门' : this.type === 1 ? '修改' : '详情'
            }
        },
        created() {
            this.getDataList(1)
        },
        methods:{
            handleDetail(row) {
                this.addForm = JSON.parse(JSON.stringify(row))
                this.type = 2
                this.dialogVisible = true
                if (!isEmpty(this.$refs.addForm)) {
                    this.$refs.addForm.resetFields()
                }
            },
            handleUpdate(row) {
                this.addForm = JSON.parse(JSON.stringify(row))
                this.type = 1
                this.dialogVisible = true
                if (!isEmpty(this.$refs.addForm)) {
                    this.$refs.addForm.resetFields()
                }
            },
            handleDelete(row) {

                this.$confirm('确认删除?', '提示', { type: 'warning' })
                    .then(() => {
                        if (!isEmpty(row) && !isEmpty(row.id)) {
                            var url = stringFormat(this.url.delete, [row.id])
                            this.$http.delete(url).then(() => {
                                this.getDataList()
                            })
                        }
                    })
                    .catch(() => {})
            },
            handleAdd() {
                this.type = 0
                this.addForm = {
                    parentId: '',
                    departName: '',
                    orgCode: '',
                    remark: ''
                }
                this.dialogVisible = true
                if (!isEmpty(this.$refs.addForm)) {
                    this.$refs.addForm.resetFields()
                }
            },
            getDataList(page) {
                this.pageNum = isEmpty(page) ? this.pageNum : page
                this.$http
                    .get(this.url.page, {
                        params: {
                            _pageNum: this.pageNum,
                            _pageSize: this.pageSize
                        }
                    })
                    .then(data => {
                        var result = data.result
                        this.tableData = result.records
                        this.pageNum = result.current
                        this.pageSize = result.size
                        this.pages = result.pages
                        this.total = result.total
                    })
            },
            handlePageChange(page) {
                this.pageNum = page
                this.getDataList()
            },
            handleSizeChange(size) {
                this.pageSize = size
                this.getDataList()
            },
            updateConfirm() {
                this.$refs.addForm.validate(valid => {
                    if (valid) {
                        let _form = JSON.parse(JSON.stringify(this.addForm))

                        /* insert */
                        if (this.type === 0) {
                            var address = this.url.insert
                            this.$http.put(address, _form).then(() => {
                                this.getDataList()
                            })
                            /* update */
                        } else {
                            var address = stringFormat(this.url.update, [_form.id])
                            console.log("---------")
                            console.log(_form)
                            this.$http.put(address, _form).then(() => {
                                this.getDataList()
                            })
                        }
                        this.dialogVisible = false
                    } else {
                        return false
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .view-header{
        height: 0px;
    }
    .button{
        position: relative;
        top: -18px;
    }
    .dialog-footer{
        margin-right: 32px;
    }
</style>